<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8" isELIgnored="false"%>
<%@ include file="/WEB-INF/views/shared/taglib.jsp"%>
<%
	request.setAttribute("title", "签到");
%>
<%@ include file="/WEB-INF/views/shared/master/weContentHeader.jsp"%>

<style type="text/css">

.singer_r_img {
	display: block;
	width: 114px;
	height: 52px;
	line-height: 45px;
	background: url(images/sing_week.gif) right 2px no-repeat;
	vertical-align: middle;
	*margin-bottom: -10px;
	text-decoration: none;
}

.singer_r_img:hover {
	background-position: right -53px;
	text-decoration: none;
}

.singer_r_img span {
	margin-left: 14px;
	font-size: 16px;
	font-family: 'Hiragino Sans GB', 'Microsoft YaHei',
		sans-serif !important;
	font-weight: 700;
	color: #165379;
}

.singer_r_img.current {
	background: url(images/sing_sing.gif) no-repeat 0 2px;
	border: 0;
	text-decoration: none;
}

.sign table {
	border-collapse: collapse;
	border-spacing: 0;
	width: 100%;
}

.sign th, .sign td {
	width: 30px;
	height: 40px;
	text-align: center;
	line-height: 40px;
}

.sign th {
	font-size: 16px;
}

.sign td {
	font-weight: bolder;
	color: #404040;
	vertical-align: middle;
}

.sign .on {
	background-repeat: no-repeat;
	background-position: center;
}

.sign .today {
	background-color: #FFAA33;
}

.calendar_month_next, .calendar_month_prev {
	width: 34px;
	height: 40px;
	cursor: pointer;
	background: url(images/sign_arrow.png) no-repeat;
}

.calendar_month_next {
	float: right;
	background-position: -42px -6px;
}

.calendar_month_span {
	display: inline;
	line-height: 40px;
	font-size: 16px;
	color: #656565;
	letter-spacing: 2px;
	font-weight: bold;
}

.calendar_month_prev {
	float: left;
	background-position: -5px -6px;
}

.sign_succ_calendar_title {
	text-align: center;
}

.sign_main {
	font-family: "Microsoft YaHei", SimHei;
}

.sign_comment {
	margin: 0rem 0.5rem;
	padding: 0.8rem 0.6rem;
	font-size: 0.8rem;
	font-weight: bolder;
	font-family: "
	Microsoft
	YaHei
}

.sign_days {
	margin: 0px 0.3rem;
	color: red;
	font-weight: bolder;
	font-size: 1rem;
}
.SignRule{
	margin-top:0.2rem;
	padding: 0.5rem 2rem;
	line-height: 1.2rem;
	background-image:url("<c:url value='/images/we/active/sign_bg1.jpg' />");
	color: white;
}

.cashbox {
	width: 100%;
	height: 230px;
	background-image:url("<c:url value='/images/we/active/sign_bg1.jpg' />");
	position: relative;
}

.cashbottom {
	position: absolute;
	bottom: 0px;
	width: 100%;
	padding: 0.5rem 0px;
	background-color: black;
	opacity: 0.5;
}

.money {
	color: white;
	text-align: center;
}

.character {
	color: white;
	text-align: center;
	font-size: 16px;
}

.weui-media-box{
	padding: 0.2rem ;
}
.weui-panel:before{
	border-top: 0px;
}
</style>

<%@ include file="/WEB-INF/views/shared/master/weTitle.jsp"%>

<input type="hidden" class="isSigned" value="${isSigned}" />
<input type="hidden" class="signed" value="${signed}" />
<input type="hidden" class="continuityDays" value="${continuityDays}" />

<div class="weui-flex">
	<div class="cashbox">
		<div>
			<a>
				<div
					style="text-align: right; color: white;">
					<span><!-- 签到规则 -->&nbsp;&nbsp;</span>
				</div>
			</a>
		</div>
		<div class="sign" style="text-align: center;">			
			<img style="width:100px;height:90px" alt="" src="<c:url value='/images/we/active/tittle1.png'/>">			
		</div>
		<div class="sign">
			<p class="character">
				<span class="showsign" style="margin-top: 4px;display: inline-block;background-color: #fff;color:#4f3b81;text-align: center;border-radius:5px;padding: 0.1rem 0.3rem">
					点击签到
				</span>
			</p>
		</div>

		<div class="cashbottom">
			<div class="weui-flex">
				<div class="weui-flex__item "
					style="text-align: center; flex-grow: 1; border-right: 1px solid white;">
					<p style="color: white;" class="continuityDays">${continuityDays}</p>
					<p style="color: white;">连续签到天数</p>
				</div>

				<div class="weui-flex__item"
					style="text-align: center; flex-grow: 1;">
					<p style="color: white;" class="alldays">${alldays}</p>
					<p style="color: white;">累积签到天数</p>
				</div>

			</div>
		</div>
	</div>
</div>

<div class="sign_comment" style="text-align: center;" id="calendar">

</div>
<div style="text-align: center;">
	<img class="weui-media-box__thumb" src="<c:url value='/images/we/active/line.png' />">	
</div>

		<div class="weui-panel weui-panel_access" style="padding-left: 1rem;padding-bottom: 1rem">
		  <div class="weui-panel__bd">
		    <a class="weui-media-box weui-media-box_appmsg">
		      <div class="weui-media-box__hd" style="width: 32px;height: 32px">
		        <img class="weui-media-box__thumb" src="<c:url value='/images/we/active/role4.png' />">
		      </div>
		      <div class="weui-media-box__bd">
				每次签到可得5金豆
		      </div>
		    </a>
		  </div>
		  <div class="weui-panel__bd">
		    <a class="weui-media-box weui-media-box_appmsg">
		      <div class="weui-media-box__hd" style="width: 32px;height: 32px">
		        <img class="weui-media-box__thumb" src="<c:url value='/images/we/active/role.png' />">
		      </div>
		      <div class="weui-media-box__bd">
				连续签到7天额外获得10金豆
		      </div>
		    </a>
		  </div>
		  <div class="weui-panel__bd">
		    <a class="weui-media-box weui-media-box_appmsg">
		      <div class="weui-media-box__hd" style="width: 32px;height: 32px">
		        <img class="weui-media-box__thumb" src="<c:url value='/images/we/active/role3.png' />">
		      </div>
		      <div class="weui-media-box__bd">
				连续签到30天额外获得100金豆
		      </div>
		    </a>
		  </div>
		</div>

<p class="toAlert" style="color: red;" hidden>${addBean}</p>
<%@ include file="/WEB-INF/views/shared/scripts/jquery.jsp"%>
<%@ include file="/WEB-INF/views/shared/scripts/tabmob.jsp"%>
<%@ include file="/WEB-INF/views/shared/scripts/jqweui.jsp"%>
<%@ include file="/WEB-INF/views/shared/master/weContentFooter.jsp"%>

<script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
<script type="text/javascript">
	$(function() {
		//ajax获取日历json数据
		var signList = ${signedDate};
		calUtil.init(signList);
		
		cssForSignDay();
		
		if ($(".isSigned").val() == "true") {
			$(".showsign").html("已签到");
		}
	});
	
	function cssForSignDay() {
		//已签到样式设置
		$(".sign .on ").html("");
		$.each($(".sign .on "), function(i, value) {
			url = "<c:url value='/images/we/active/sign"+ Math.floor((Math.random() * 11) + 1) + ".png'/>";
			var signImgUrl = "url('" + url + "')";
			$(this).css("background-size", "40px");
			$(this).css("background-image", signImgUrl);
		});
	}

	$(".sign").click(function() {
		if ($(".isSigned").val() == "true") {
			$.toast("已签到,无需重复签到", "text");
		} else {
			var url = $.getVirtualPath() + "/wechat/active/sign/doSign";
			$.post(url, {signing : 'doSign'}, function(res) {

				if(res.isSigned == 'true'){
					$.toast("已签到,无需重复签到", "text");
					return ;
				}
				$(".isSigned").val(res.isSigned);
				$(".showsign").html("已签到");
				$(".toAlert").html(res.addBean);
				$(".alldays").html(res.alldays);
				$(".continuityDays").html(res.continuityDays);
				$(".signed").val(res.signed);
				$(".toAlert").html(res.addBean);
				var signDays = res.signDay;
				calUtil.init(signDays);
				
				cssForSignDay();
				
				if ($(".signed").val() == "yes") {
					$.toast("签到成功&nbsp;+"+$(".toAlert").html()+"金豆");
				}
			},
			'json');
		}
	});

	var calUtil = {
		//当前日历显示的年份
		showYear : 2015,
		//当前日历显示的月份
		showMonth : 1,
		//当前日历显示的天数
		showDays : 1,
		eventName : "load",
		//初始化日历
		init : function(signList) {
			calUtil.setMonthAndDay();
			calUtil.draw(signList);
			calUtil.bindEnvent();
		},
		draw : function(signList) {
			//绑定日历
			var str = calUtil.drawCal(calUtil.showYear, calUtil.showMonth,
					signList);
			$("#calendar").html(str);
			//绑定日历表头
			var calendarName = calUtil.showYear + "年" + calUtil.showMonth + "月";
			$(".calendar_month_span").html(calendarName);
		},

		//绑定事件
		bindEnvent : function() {
		},

		//获取当前选择的年月
		setMonthAndDay : function() {
			switch (calUtil.eventName) {
			case "load":
				var current = new Date();
				calUtil.showYear = current.getFullYear();
				calUtil.showMonth = current.getMonth() + 1;
				break;
			case "prev":
				var nowMonth = $(".calendar_month_span").html().split("年")[1]
						.split("月")[0];
				calUtil.showMonth = parseInt(nowMonth) - 1;
				if (calUtil.showMonth == 0) {
					calUtil.showMonth = 12;
					calUtil.showYear -= 1;
				}
				break;
			case "next":
				var nowMonth = $(".calendar_month_span").html().split("年")[1]
						.split("月")[0];
				calUtil.showMonth = parseInt(nowMonth) + 1;
				if (calUtil.showMonth == 13) {
					calUtil.showMonth = 1;
					calUtil.showYear += 1;
				}
				break;
			}
		},
		//得到当前月份的天数
		getDaysInmonth : function(iMonth, iYear) {
			var dPrevDate = new Date(iYear, iMonth, 0);
			return dPrevDate.getDate();
		},
		bulidCal : function(iYear, iMonth) {
			var aMonth = new Array();
			aMonth[0] = new Array(7);
			aMonth[1] = new Array(7);
			aMonth[2] = new Array(7);
			aMonth[3] = new Array(7);
			aMonth[4] = new Array(7);
			aMonth[5] = new Array(7);
			aMonth[6] = new Array(7);
			var dCalDate = new Date(iYear, iMonth - 1, 1);
			var iDayOfFirst = dCalDate.getDay();//得到第一天是星期几
			var iDaysInMonth = calUtil.getDaysInmonth(iMonth, iYear);
			var iVarDate = 1;
			var d, w;
			aMonth[0][0] = "日";
			aMonth[0][1] = "一";
			aMonth[0][2] = "二";
			aMonth[0][3] = "三";
			aMonth[0][4] = "四";
			aMonth[0][5] = "五";
			aMonth[0][6] = "六";

			//第一行星期与日期对应
			for (d = iDayOfFirst; d < 7; d++) {
				aMonth[1][d] = iVarDate;
				iVarDate++;
			}

			//遍历2—6行
			for (w = 2; w < 7; w++) {
				for (d = 0; d < 7; d++) {
					if (iVarDate <= iDaysInMonth) {
						aMonth[w][d] = iVarDate;
						iVarDate++;
					}
				}
			}
			return aMonth;
		},

		ifHasSigned : function(signList, day) {
			var signed = false;
			$.each(signList, function(index, item) {
				if (item.signDay == day) {
					signed = true;
					return false;
				}
			});
			return signed;
		},
		drawCal : function(iYear, iMonth, signList) {
			var myMonth = calUtil.bulidCal(iYear, iMonth);
			var htmls = new Array();
			htmls.push("<div class='sign_main' id='sign_layer'>");
			htmls.push("<div class='sign_succ_calendar_title'>");
			htmls.push("<div class='calendar_month_span'></div>");
			htmls.push("</div>");
			htmls.push("<div class='sign' id='sign_cal'>");
			htmls.push("<table>");
			htmls.push("<tr>");
			htmls.push("<th>" + myMonth[0][0] + "</th>");
			htmls.push("<th>" + myMonth[0][1] + "</th>");
			htmls.push("<th>" + myMonth[0][2] + "</th>");
			htmls.push("<th>" + myMonth[0][3] + "</th>");
			htmls.push("<th>" + myMonth[0][4] + "</th>");
			htmls.push("<th>" + myMonth[0][5] + "</th>");
			htmls.push("<th>" + myMonth[0][6] + "</th>");
			htmls.push("</tr>");
			var d, w;
			for (w = 1; w < 6; w++) {
				htmls.push("<tr>");
				for (d = 0; d < 7; d++) {
					var ifHasSigned = calUtil.ifHasSigned(signList,
							myMonth[w][d]);
					console.log(ifHasSigned);
					if (ifHasSigned) {
						htmls.push("<td class='on'>"
								+ (!isNaN(myMonth[w][d]) ? myMonth[w][d] : " ")
								+ "</td>");
					} else {
						htmls.push("<td>"
								+ (!isNaN(myMonth[w][d]) ? myMonth[w][d] : " ")
								+ "</td>");
					}
				}
				htmls.push("</tr>");
			}
			htmls.push("</table>");
			htmls.push("</div>");
			htmls.push("</div>");
			return htmls.join('');
		}
	};
</script>

